<template>
  <el-card class="contanier">
    <div slot="header" class="clearfix">
      <span>旅游数据概览</span>
      <div class="circle" style="float: right; padding: 3px 0">  
    <div  
       
      class="item"  
      @click="toggleActive('item1')"  
      :class="{ active: isActive('item1') }"  
    >  
       
    </div>  
    <div  
        
      class="item"  
      @click="toggleActive('item2')"  
      :class="{ active: isActive('item2') }"  
    >  
        
    </div>  
    <div  
        
      class="item"  
      @click="toggleActive('item3')"  
      :class="{ active: isActive('item3') }"  
    >  
       
    </div>  
    <div  
       
      class="item"  
      @click="toggleActive('item4')"  
      :class="{ active: isActive('item4') }"  
    >  
      
    </div>  
  </div>  
    </div>
  </el-card>
</template>

<script>  
export default {  
  data() {  
    return {  
      activeItem:'item1' , // 用来跟踪当前活动的元素  
    };  
  },  
  methods: {  
    isActive(itemName) {  
      // 检查当前活动的元素是否是点击的元素  
      return this.activeItem === itemName;  
    },  
    toggleActive(itemName) {  
      // 切换活动的元素  
      this.activeItem = this.activeItem === itemName ? null : itemName;  
    },  
  },  
};  
</script>  
  
</script>

<style scoped>
.active{
    background-color: #E0E3DA;
}
.contanier {
  margin: 30px;
  width: 40%;
  height: 500px;
  .clearfix{
    .circle{
        display: flex;
        .item{
            width:10px;
            height: 10px;
            border-radius: 50%;
            background-color:#eee;
            margin-right: 5px;
        }
    }
  }
}





</style>
